<template>
  <div class="messageBoxFather">

<div class="screenBox">
  <div class="messageBox" ref="messageRef" id="ddddqq" v-if="messageData" @scroll="throttleFn">
    <!-- <div class="loadingBoxbottom" style="color:#2196f3;cursor: pointer;" @click="loadMoreData">
      <i :class="loadClass2" style="color:#2196f3"></i> {{ loadingText2 }}
    </div> -->
    <div class="messageContentTitle">
      <div class="friendName" v-if="chatWithObj">
        <span :title="chatWithObj.nick"
          style="font-weight:1000;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ chatWithObj.nick }}</span>
        <p :title="chatWithObj.username"
          style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ chatWithObj.username }}
        </p>
      </div>
      <div>
        <a-input-search placeholder="搜索聊天记录" v-model="searchWord" style="100%" @search="onSearchStart" />
      </div>
    </div>

    <!-- 系统消息提示区 -->
    <div v-for="(item, index) in messageData" :key="index">
      <!-- ******************************************* 接收区 ******************************************************* -->
      <!-- 系统消息 -->
      <div :title="formateTikTokMessage(item.content).content" v-if="item.msgtime == 5 || item.msgtime == 7" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{$t('wechat.systemTip')}}：{{ formateTikTokMessage(item.content).content }}
      </div>
      
      <!-- left -->
      <div v-else-if="item.issend == 0">
        <!-- Left --> <!-- 文本 -->
        <div class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position: relative;">
            <img v-if="item.contactavatar" :src="item.contactavatar" />
            <img v-else src="../../../assets/images/otherApp/user.png" />
            <div v-if="startPrint"
              style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;">
              <el-button @click="handleClickPrint(item, $event)" size="small" type="text">添加</el-button>
            </div>
          </div>
          <div>
            {{ item.contactnick }} {{ item.contactname }}
            <span style="margin-left:.05rem;">{{ formDate(item.sendtime) }}</span> 
            <span style="color:red;" v-if="item.recover == 1">
              <i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}
            </span>
          </div>

          <div>
            <div class="chat-left_triangle"></div>
            
            <!-- 正常文字消息 -->
            <span v-if="item.msgtime == 0" style="word-wrap:break-word;width:200px;">
              {{ item.content }}
            </span>
            
            <!-- 表情 -->
            <div v-else-if="item.msgtime == 5" class="emoji-message">
              <!-- <img :src="formatEmoji(item.content)" class="emoji-img" alt="表情" /> -->
              <span  span v-if="formateTikTokMessage(item.content).type !=777">{{"表情："+formateTikTokMessage(item.content).display_name}}</span>
              <span v-else>{{item.content}}</span>
            </div>
            
            <!-- 表情包 -->
            <div v-else-if="item.msgtime == 15" class="sticker-message">
              <img :src="formatSticker(item.content)" class="sticker-img" alt="表情包" />
            </div>
            
            <!-- 通话 -->
            <div v-else-if="item.msgtime == 22" class="call-message">
              <i class="el-icon-phone"></i>
              <span>{{ formatCallMessage(item.content).camera_off == 1 ? '语音通话' : '视频通话' }}</span>
              <span class="call-duration">{{ formatCallDuration(item.content) }}</span>
            </div>
            
            <!-- 请收款 -->
            <div v-else-if="item.msgtime == 135" class="payment-request">
                <img style="width:30px;height:30px;" src="../../../assets/zhuan.png" alt="">
              <span>请求收款: {{ formatPaymentAmount(item.content) }}</span>
            </div>
           <!-- 名片消息 -->
          <div v-else-if="item.msgtime == 33" class="card-message">
            <div class="card-container">
              <div class="card-header">
                <img 
                  :src="formateTikTokMessage(formateTikTokMessage(item.content).t28.extends).avatar" 
                  class="card-avatar"
                />
                <div class="card-info">
                  <div class="card-name">{{ formateTikTokMessage(item.content).content }}</div>
                  <div class="card-detail">
                    名片推荐
                  </div>
                </div>
              </div>
            </div>
          </div>
            
            
            <!-- 分享评论 -->
            <div v-else-if="item.msgtime == 105" class="shared-comment">
              <div class="comment-source">
                <div>分享: {{ formateTikTokMessage(item.content).comment_user_name }}的评论</div>
              </div>
              <br>
              <div class="comment-content">
                <div>{{ formateTikTokMessage(item.content).comment }}</div>
              </div>
            </div>
            <!-- 发布动态 -->
            <div v-else-if="item.msgtime == 44" class="watch-together">
              <div>
                <img :src="formateTikTokMessage(formateTikTokMessage(item.content).t39.clientLayoutPics).feedimg" alt="">
              </div>
              <div class="watch-info" style="text-algin">
                <p>{{formateTikTokMessage(item.content).t39.headText}}</p>
                <p>{{formateTikTokMessage(item.content).t39content}}</p>
                <p>{{formateTikTokMessage(formateTikTokMessage(item.content).t39.contentJson).text}}</p>
                <p>{{formateTikTokMessage(item.content).t39.markTimeText}}</p>
                <p>{{"创建时间："+formDate(formateTikTokMessage(item.content).t39.createTime)}}</p>
              </div>
            </div>
            <!-- 语音消息 -->
          <div v-else-if="item.msgtime == 4" class="audio-message">
            <audio
              v-if="item.resPath && item.resPath.trim()"
              :src="`file:///${item.resPath.replace(/\\/g, '/')}`"
              controls
              class="chat-audio"
            ></audio>
            <span v-else>{{item.content}}</span>
          </div>
            
            <!-- 直播 -->
            <div v-else-if="item.msgtime == 21" class="live-stream">
              <div class="live-preview">
                <img id="userzb" src="../../../assets/zbbg.png" alt="直播封面" />
                <div class="live-badge">直播</div>
              </div>
              <div class="live-info">
                <span style="color:#ff5722;">标题：{{ formateTikTokMessage(item.content).room_description }}</span>
                <br>
                <div>
                <img :src="formateTikTokMessage(item.content).room_owner_avatar.url_list[0]" style="margin-right:10px;" alt="头像" />
                <span>房主：{{ formateTikTokMessage(item.content).room_owner_name }}</span>
                </div>
              </div>
            </div>
            
            <!-- 转发的视频 (77, 8, 110) -->
          <div v-else-if="item.msgtime == 9" class="video-message">
              <video
              style="width:150px;"
                v-if="item.resPath && item.resPath.trim()"
                :src="`file:///${item.resPath.replace(/\\/g, '/')}`"
                controls
                class="chat-video"
                preload="metadata"
              >
                您的浏览器不支持视频播放
              </video>
              <span v-else>{{item.content}}</span>
            </div>
            
            <!-- 图片 -->
            <div v-else-if="item.msgtime == 1 || item.msgtime == 6" class="image-message" @click="previewImage(item.content)">
              <img v-if="item.resPath && item.resPath.trim()" :src="item.resPath && item.resPath.trim() ? 'file:///' + item.resPath : ''" alt="图片" class="chat-image" />
              <span v-else>{{item.content}}</span>
            </div>
            
            <!-- GPS/位置 -->
            <div v-else-if="item.msgtime == 2" class="location-message">
                <span style="color:#000;">定位信息</span>
              <!-- <div class="location-preview">
                <chatMap class='mapmapmap'  style="float:none;" :iddata="`map${index}`" v-if="formateTikTokMessage(item.content)" :position="formdatePosition(item.content)"/>
              </div> -->
              <!-- <div class="location-info">
                <span>{{ formateTikTokMessage(item.content).poi_name }}</span>
                <span class="location-address">{{ formateTikTokMessage(item.content).poi_address }}</span>
              </div> -->
            </div>
            
            <!-- 视频 -->
            <div v-else-if="item.msgtime == 17" class="video-message" @click="playVideo(item.content)">
              <div class="video-preview">
                <img :src="formatVideo(item.content).cover" alt="视频封面" />
                <i class="el-icon-video-play video-play-icon"></i>
              </div>
              <div class="video-duration">{{ formatVideoDuration(item.content) }}</div>
            </div>
            
            <!-- 邀你一起看视频 -->
            <div v-else-if="item.msgtime == 90" class="watch-together">
              <div class="watch-info" style="text-algin">
                <p>{{formateTikTokMessage(item.content).title}}</p>
                <p>{{formateTikTokMessage(item.content).sub_title}}</p>
              </div>
            </div>
            
            
            <!-- 问答 -->
            <div v-else-if="item.msgtime == 118" class="qa-message">
              <div class="question">
                <div class="question-label">问: </div>
                <span>{{ formatQA(item.content).question }}</span>
              </div>
              <br>
              <div class="answer">
                <span class="answer-label">答: </span>
                <span>{{ formatQA(item.content).text }}</span>
              </div>
            </div>
            
            <!-- 语音 -->
            <!-- <div v-else-if="item.msgtime == 17 && formateTikTokMessage(item.content).resource_url" class="voice-message" @click="playVoiceMessage(item)">
              <div class="voice-content">
                <i :class="isPlaying(item.id) ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
                <span class="voice-text">语音消息</span>
                <span class="voice-duration">{{formatDuration(formateTikTokMessage(item.content).duration)}}</span>
              </div>
              <audio :ref="'audio-' + item.id" :src="formateTikTokMessage(item.content).resource_url.url_list[0]" @ended="audioEnded(item.id)" preload="none"></audio>
            </div> -->
            
            <!-- 视频分享 -->
            <p v-else-if="formateTikTokMessage(item.content).aweType == 800" class="itemTikTok">
              <img width="240" height="400" 
                :src="formateTikTokMessage(item.content).cover_url.url_list[formateTikTokMessage(item.content).cover_url.url_list.length - 1]"
                alt="">
              <span class="videoContent">{{ formateTikTokMessage(item.content).content_name }}</span><br>
              <span class="videoContent">{{ formateTikTokMessage(item.content).content_title }}</span>
            </p>
            
            <!-- 其他类型的消息处理 -->
            <span v-else-if="formateTikTokMessage(item.content).aweType == 700 || formateTikTokMessage(item.content).aweType == 0 || formateTikTokMessage(item.content).aweType == 701">
              <span>{{ formateTikTokMessage(item.content).text ? formateTikTokMessage(item.content).text : formateTikTokMessage(item.content).tips }}</span>
            </span>
            
            <span v-else-if="formateTikTokMessage(item.content).text">
              <span>{{ formateTikTokMessage(item.content).text }}</span>
            </span>
            
            <span @click="showInfo(item.content)" v-else-if="formateTikTokMessage(item.content).aweType == 2702">
              <span class="unKonw">无法解析(点击查看消息详情)</span>
            </span>
            
            <span v-else style="word-wrap:break-word;width:200px;">
              {{ item.content }}
            </span>
            
            <div class="badgeBox" v-if="item.cntRemark > 0">{{$t('wechat.remarked')}}</div>
            <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini"
              style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">标记
            </el-button>
          </div>
        </div>
      </div>
      
      <!-----------------------------------------  发 送 区  --------------------------------------->
      <div v-else>
        <!-- Right --> <!-- 发送气泡 -->
        <div class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img src="../../../assets/images/otherApp/userBlue.png" />
            <div v-if="startPrint"
              style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;">
              <el-button @click="handleClickPrint(item, $event)" size="small" type="text">添加</el-button>
            </div>
          </div>
          <div>
            {{ accountData.nick }} {{ item.sendername }}
            <span style="margin-left:.05rem;">{{ formDate(item.sendtime) }}</span> 
            <span style="color:red;" v-if="item.recover == 1">
              <i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}
            </span>
          </div>
          
          <div>
            <div class="chat-right_triangle"></div>
            
            <!-- 正常文字消息 -->
            <span v-if="item.msgtime == 0" style="word-wrap:break-word;width:200px;">
                {{ item.content }}
            </span>
                       <!-- 名片消息 -->
         <div v-else-if="item.msgtime == 33" class="card-message">
            <div class="card-container">
              <div class="card-header">
                <img 
                  :src="formateTikTokMessage(formateTikTokMessage(item.content).t28.extends).avatar" 
                  class="card-avatar"
                />
                <div class="card-info">
                  <div class="card-name">{{ formateTikTokMessage(item.content).content }}</div>
                  <div class="card-detail">
                    名片推荐
                  </div>
                </div>
              </div>
            </div>
          </div>
            
            <!-- 表情 -->
            <div v-else-if="item.msgtime == 5" class="emoji-message">
              <span v-if="formateTikTokMessage(item.content).type !=777">{{"表情："+formateTikTokMessage(item.content).display_name}}</span>
              <span v-else>{{item.content}}</span>
            </div>
            
            <!-- 表情包 -->
            <div v-else-if="item.msgtime == 15" class="sticker-message">
              <img :src="formatSticker(item.content)" class="sticker-img" alt="表情包" />
            </div>
            
            <!-- 通话 -->
            <div v-else-if="item.msgtime == 22" class="call-message">
              <i class="el-icon-phone"></i>
              <span>{{ formatCallMessage(item.content).camera_off == 1 ? '语音通话' : '视频通话' }}</span>
              <span class="call-duration">{{ formatCallDuration(item.content) }}</span>
            </div>
            
            <!-- 请收款 -->
            <div v-else-if="item.msgtime == 135" class="payment-request">
              <img style="width:30px;height:30px;" src="../../../assets/zhuan.png" alt="">
              <span>请求收款: {{ formatPaymentAmount(item.content) }}</span>
            </div>
            
            <!-- 分享评论 -->
            <div v-else-if="item.msgtime == 105" class="shared-comment">
              <div class="comment-source">
                <div>分享: {{ formateTikTokMessage(item.content).comment_user_name }}的评论</div>
              </div>
              <br>
              <div class="comment-content">
                <div>{{ formateTikTokMessage(item.content).comment }}</div>
              </div>
            </div>
            <!-- 发布动态 -->
            <div v-else-if="item.msgtime == 44" class="watch-together">
              <div class="watch-info" style="text-algin">
                <p>{{formateTikTokMessage(item.content).t39.headText}}</p>
                <p>{{formateTikTokMessage(item.content).t39.content}}</p>
                <p>{{formateTikTokMessage(formateTikTokMessage(item.content).t39.contentJson).text}}</p>
                <p>{{formateTikTokMessage(item.content).t39.markTimeText}}</p>
                <p>{{"创建时间："+formDate(formateTikTokMessage(item.content).t39.createTime)}}</p>
              </div>
            </div>
             <!-- 语音消息 -->
          <div v-else-if="item.msgtime == 4" class="audio-message">
            <audio
              v-if="item.resPath && item.resPath.trim()"
              :src="`file:///${item.resPath.replace(/\\/g, '/')}`"
              controls
              class="chat-audio"
            ></audio>
            <span v-else>{{item.content}}</span>
          </div>
            <!-- 直播 -->
            <div v-else-if="item.msgtime == 21" class="live-stream">
              <div class="live-preview">
                  <img  src="../../../assets/zbbg.png" alt="直播封面" />
                <div class="live-badge">直播</div>
              </div>
               <div class="live-info">
                <span style="color:#ff5722;">标题：{{ formateTikTokMessage(item.content).room_description }}</span>
                <br>
                <div>
                <img :src="formateTikTokMessage(item.content).room_owner_avatar.url_list[0]" style="margin-right:10px;" alt="头像" />
                <span>房主：{{ formateTikTokMessage(item.content).room_owner_name }}</span>
                </div>
              </div>
            </div>
            
            <!-- 转发的视频 (77, 8, 110) -->
            <!-- <div v-else-if="item.msgtime == 9" class="forwarded-video">
              <div class="video-preview">
                <span>分享视频</span>
   
                <a title="点击查看" :href="`https://www.douyin.com/video/${formateTikTokMessage(item.content).itemId}`" target="_blank" rel="noopener noreferrer"><i class="el-icon-video-play video-icon"></i></a>
              </div>
              <div class="video-info">
                <span>{{ formateTikTokMessage(item.content).content_title }}</span>
              </div>
            </div> -->
            <div v-else-if="item.msgtime == 9" class="video-message">
              <video
              style="width:150px;"
                v-if="item.resPath && item.resPath.trim()"
                :src="`file:///${item.resPath.replace(/\\/g, '/')}`"
                controls
                class="chat-video"
                preload="metadata"
              >
                您的浏览器不支持视频播放
              </video>
              <span v-else>{{item.content}}</span>
            </div>
            
            <!-- 图片 -->
            <div v-else-if="item.msgtime == 1 || item.msgtime == 6" class="image-message" @click="previewImage(item.content)">
              <img v-if="item.resPath && item.resPath.trim()" :src="item.resPath && item.resPath.trim() ? 'file:///' + item.resPath : ''" alt="图片" class="chat-image" />
              <span v-else>{{item.content}}</span>
            </div>
            
            <!-- GPS/位置 -->
            <div v-else-if="item.msgtime == 2" class="location-message">
              <!-- <div class="location-preview">
                <chatMap class='mapmapmap'  style="float:none;" :iddata="`map${index}`" v-if="formateTikTokMessage(item.content)" :position="formdatePosition(item.content)"/>
              </div> -->
              <span style="color:#000;">定位信息</span>
            </div>
            
            <!-- 视频 -->
            <div v-else-if="item.msgtime == 17" class="video-message" @click="playVideo(item.content)">
              <div class="video-preview" v-if="formateTikTokMessage(item.content).aweType == 0">
                <img :src="formatVideo(item.content).cover" alt="视频封面" />
                <i class="el-icon-video-play video-play-icon"></i>
              </div>
              <div class="video-duration">{{ formatVideoDuration(item.content) }}</div>
              <!-- <video :src="formateTikTokMessage(item.content)"></video> -->
            </div>
            
            <!-- 邀你一起看视频 -->
            <div v-else-if="item.msgtime == 90" class="watch-together">
              <div class="watch-preview">
                <img style="width:100%;height:100%;border-radius:0;" :src="formateTikTokMessage(item.content).cover_url.url_list[0]" alt="视频封面" />
                <!-- <i class="el-icon-video-play watch-icon"></i> -->
              </div>
              <div class="watch-info">
                <p>{{formateTikTokMessage(item.content).title}}</p>
                <p>{{formateTikTokMessage(item.content).sub_title}}</p>
              </div>
            </div>
            
            <!-- 问答 -->
            <div v-else-if="item.msgtime == 118" class="qa-message">
              <div class="question">
                <span class="question-label">问: </span>
                <span>{{ formatQA(item.content).question }}</span>
              </div>
              <br>
              <div class="answer">
                <span class="answer-label">答: </span>
                <span>{{ formatQA(item.content).text }}</span>
              </div>
            </div>
            
            <!-- 语音 -->
            <!-- <div v-else-if="item.msgtime == 17 && formateTikTokMessage(item.content).resource_url" class="voice-message" @click="playVoiceMessage(item)">
              <div class="voice-content">
                <i :class="isPlaying(item.id) ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
                <span class="voice-text">语音消息</span>
                <span class="voice-duration">{{formatDuration(formateTikTokMessage(item.content).duration)}}</span>
              </div>
              <audio :ref="'audio-' + item.id" :src="formateTikTokMessage(item.content).resource_url.url_list[0]" @ended="audioEnded(item.id)" preload="none"></audio>
            </div> -->
            
            <!-- 视频分享 -->
            <p v-else-if="formateTikTokMessage(item.content).aweType == 800" class="itemTikTok">
              <img width="240" height="400" 
                :src="formateTikTokMessage(item.content).cover_url.url_list[formateTikTokMessage(item.content).cover_url.url_list.length - 1]"
                alt="">
              <span class="videoContent">{{ formateTikTokMessage(item.content).content_name }}</span><br>
              <span class="videoContent">{{ formateTikTokMessage(item.content).content_title }}</span>
            </p>
            
            <!-- 其他类型的消息处理 -->
            <span v-else-if="formateTikTokMessage(item.content).aweType == 700 || formateTikTokMessage(item.content).aweType == 0 || formateTikTokMessage(item.content).aweType == 701">
              <span>{{ formateTikTokMessage(item.content).text ? formateTikTokMessage(item.content).text : formateTikTokMessage(item.content).tips }}</span>
            </span>
            
            <span v-else-if="formateTikTokMessage(item.content).text">
              <span>{{ formateTikTokMessage(item.content).text }}</span>
            </span>
            
            <span @click="showInfo(item.content)" v-else-if="formateTikTokMessage(item.content).aweType == 2702">
              <span class="unKonw">无法解析(点击查看消息详情)</span>
            </span>
            
            <span v-else style="word-wrap:break-word;width:200px;">
              {{ item.content }}
            </span>
            
            <div class="badgeBox" v-if="item.cntRemark > 0">{{$t('wechat.remarked')}}</div>
            <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini"
              style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
      </div>
    </div>
    <div></div>
    <div class="loadingBoxbottom" v-if="showLoading" style="color:#2196f3;float:left">
      <i :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}
    </div>
  </div>
  
  <a-affix :offset-bottom="0">
    <el-button type="primary" style="" @click="printPdf" v-if="startPrint">{{$t('wechat.startDaYin')}}</el-button>
    <el-button style="" @click="closePrintFunction" v-if="startPrint">{{$t('wechat.close')}}</el-button>
  </a-affix>
</div>

    <!-- 查看语音包Message详情 -->
    <a-modal title="语音详情" :maskClosable="false" :footer="null" width="50%" :visible="visibleAudio"
      :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <div class="audioBox">
        <div class="AudioLogo">
          <img width="100%" height="100%" src="../../../assets/images/weChatQQ/cipan.png" alt="">
          <i id="playAudio" :class="icon" title="点击播放" @click="playAudioFile"></i>
        </div>
        <div class="pathBox">
          <div class="itemAudio bottomBorder" style="border-top-right-radius: 5px;">
            文件名称：-语音12345787654
          </div>
          <div class="itemAudio" style="border-bottom-right-radius: 5px;">
            本地路径：C:\Users\han\Desktop\ff5dfb8838d9acfc7eefff669166094e.mp4
          </div>
        </div>
      </div>
      <div style="padding-left:2%;font-size:12px;margin-top:5px;color:#ccc;">点击左侧按钮播放视频</div>
    </a-modal>
    <!-- 查看转发聊天记录详情 -->
    <a-modal :maskClosable="false" :footer="null" :title="MessageFriendTitle" :width="500"
      :visible="MessageFriendContentVisible" @ok="handleOkMessageFriend" @cancel="handleCancelMessageFriend">
      <div class="listBox">
        <div class="chatRecord" v-for="(item, index) in messageRDataList" :key="index">
          <div class="friendAvatar">
            <img style="width:70%;height:70%;" src="../../../assets/images/weChatQQ/chartImg.png" alt="">
          </div>
          <div>

          </div>
          <div class="" style="background:#efeeee;padding:10px;border-radius:10px;" v-if="(item.msg instanceof Array)">

            <p style="">{{ item.sourcename }} 转发聊天记录</p>
            <div style="width:350px;border-bottom:1px solid#fff;padding-top:15px;" v-for="(i, j) in item.msg" :key="j">
              <div v-if="(i.msg instanceof Array)">
                <p style="margin-bottom:10px;">{{ i.sourcename }} 转发聊天记录中的转发聊天记录</p>
                <div v-for="(x, y) in i.msg" :key="y">
                  <div style="padding-left:20px;">
                    <p>{{ x.sourcename }}：{{ x.msg }}</p>
                    <p style="margin-bottom:15px;">{{ x.time }}</p>
                  </div>
                </div>
              </div>
              <div v-else style="padding-left:20px;">
                <p>{{ i.sourcename }}：{{ i.msg }}</p>
                <p style="margin-bottom:15px;">{{ i.time }}</p>
              </div>
            </div>
          </div>
          <div class="chatRecordContent" v-else>
            <div class="chatRecordContentLeft">
              <div class="friendNames" style="font-size:13px;color:#898989d9;">{{ item.sourcename }}</div>
              <div class="friendNames friendNamesContent" style="font-size:1000;" title="详情提示">{{ item.msg }}</div>
            </div>
            <div class="chatRecordDate">{{ item.time }}</div>
          </div>
        </div>

      </div>

    </a-modal>
    <!-- 查看推荐好友名片 -->
    <a-modal v-model="modal2Visible" :footer="null" title="个人名片" centered @ok="() => (modal2Visible = false)">
      <div class="cardContent">
        <img width="100px" height="100px" :src="card._bigheadimgurl" alt="">
        <div class="cardTextInfo" v-if="card">
          <p style="font-weight:1000;display:flex;align-items:center;font-size:20px;">{{ card._nickname }}</p>
          <p>昵称:{{ card._fullpy }}</p>
          <p v-if="card._sex == 1">性别:男</p>
          <p v-else-if="card._sex == 2">性别:女</p>
          <p v-else>性别:未知</p>
          <p>地区:{{ card._province }}-{{ card._city }}</p>
        </div>
      </div>

    </a-modal>
    <!-- 无法解析消息类型详情 -->
    <a-modal v-model="erroMessageModel" :getContainer="getRefsAff" :footer="null" title="消息详情" centered
      @ok="() => (erroMessageModel = false)">
      <div v-if="unKnowData">
        {{ unKnowData }}
      </div>
    </a-modal>

    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff" :maskClosable="false" title="提示"
      @ok="handleOk11">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>


    <!--打印窗口 -->
    <a-modal width="300px" v-model="showPrint" :getContainer="getRefsAff" :maskClosable="false" title="选择打印方式"
      @ok="printOk">
      <el-radio-group v-model="formResource">
        <el-radio label="打印所有已读" style="margin-bottom:10px;font-size:18px;"></el-radio>
        <el-radio label="手动添加已读打印" style="margin-bottom:10px;font-size:18px;"></el-radio>
        <el-radio label="截图当前可视区域" style="margin-bottom:10px;font-size:18px;"></el-radio>
      </el-radio-group>
    </a-modal>
  </div>
</template>
<script>

import position from '../map/position.vue'
import { searchFunction } from '@/api/otherApi/otherApp_api'
import { parseTime } from '@/utils/index'
import { sendMarkOrderApi } from '@/api/markApi/index'
import { throttle } from 'lodash';
import chatMap from '../map/chatMap.vue'

const x2js = require('x2js');
const x2jsone = new x2js(); //实例

import ScreenShort from "js-web-screen-shot";



export default {
  props: ['chatWithObj', 'accountData', 'recover', 'offsetLimit'],
  name: "otherMessage",
  components: {
    position,
    chatMap
  },
  data() {
    return {
      playingAudioId: null, // 当前正在播放的语音ID
      stopAppendMessageData: false,
      printArray: [],
      startPrint: false,
      formResource: "打印所有已读",
      showPrint: false,
      msgtime: 0,

      selectld: -1,
      selectType: 0, //0下1上
      selectTime: -1,
      isExistsSelectID: 0,

      showTime: false,
      showDetails: true,
      loadClass: 'el-icon-loading',
      loadingText: '正在加载. . .',
      showLoading: false,

      loadClass2: 'el-icon-refresh-left',
      loadingText2: '点击加载更多',
      showLoading2: false,

      showRemark: false,
      remark: '',
      id: '',
      searchWord: '',
      card: '',
      messageRDataList: [],
      offset: 1,
      limit: 20,
      form: {
        type: [],
        delivery: ''
      },
      unKnowData: '',
      total: 0,
      self: require('../../../assets/images/otherApp/userBlue.png'),
      messageData: [],
      erroMessageModel: false,
      modal2Visible: false,
      MessageFriendContentVisible: false,
      MessageFriendTitle: '聊天记录',
      icon: 'el-icon-video-play',
      visibleAudio: false,
      confirmLoading: false,
      url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F512%2F0PQ2123I9%2F120PQ23I9-10-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646980202&t=e8f5aecc7763071d76513929b701069d',
      srcList: [],
      usernameMark: ''
    }
  },
  watch: {
    '$store.state.account.otherdata': function () {
      if (this.offsetLimit.msg_offset) {
        this.offset = this.offsetLimit.msg_offset;
        this.selectld = this.offsetLimit.id;
        this.selectTime = this.offsetLimit.msgtime;
        this.isExistsSelectID = 1;
      } else {
        this.offset = 1
        this.total = 0

        this.selectld = -1
        this.selectType = 0//0下1上
        this.selectTime = -1
        this.isExistsSelectID = 0
      }
      this.loadClass2 = 'el-icon-refresh-left';
      this.loadingText2 = '点击加载更多！';
      this.messageData = []
      this.onSearch()
    }
  },
  created() {
    if (this.offsetLimit.msg_offset) {
      this.offset = this.offsetLimit.msg_offset
    } else {
      this.offset = 1
      this.total = 0
    }
    this.onSearch()
  },
  methods: {
    // 格式化表情
formatEmoji(content) {
  try {
    const data = JSON.parse(content);
    return data.url || data.emoji_url || '';
  } catch (e) {
    return '';
  }
},

    flayRemark(item){
      this.messageData=[];
      let data={
          recovery:this.recover,
          proof_num:this.chatWithObj.proof_num,
          account_id:Number(this.accountData.account_id),
          model:'other_app',
          username:this.chatWithObj.username,
          searchkey:this.searchWord,
          offset:this.offset,
          limit:this.limit,
          selectType:this.selectType, //0下1上
          selectTime:item.msgtime,
          isExistsSelectID:1,
          chatContentID:item.id
      }
      searchFunction(data,'/search/chat/content_new').then(res=>{
        if(res.data.length == 0){
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
          return
        }
        try {
            // this.$refs.messageRef1.scrollTop=0
            for (let index = 0; index < res.data.length; index++){
              const element = res.data[index];
              this.messageData.push(element);
            }
            this.total=res.data[0].cnt
          } catch (error) {
  
          }

      })
    },
// 格式化表情包
formatSticker(content) {
  try {
    const data = JSON.parse(content);
    return data.url || data.sticker_url || '';
  } catch (e) {
    return '';
  }
},
// 格式化位置信息
formdatePosition(item){
  let local ={
    _x:this.formateTikTokMessage(item).latitude,
    _y:this.formateTikTokMessage(item).longitude,
  }
  console.log("pppp",local)
  return local;
},
// 格式化通话消息
formatCallMessage(content) {
  try {
    const data = JSON.parse(content);
    return {
      camera_off: data.camera_off || 0,
      duration: data.duration || 0
    };
  } catch (e) {
    return { camera_off: 0, duration: 0 };
  }
},

// 格式化通话时长
formatCallDuration(content) {
  try {
    const data = JSON.parse(content);
    const duration = data.duration || 0;
    const minutes = Math.floor(duration / 60);
    const seconds = duration % 60;
    return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
  } catch (e) {
    return '0:00';
  }
},

// 格式化收款金额
formatPaymentAmount(content) {
  try {
    const data = JSON.parse(content);
    return data.amount/100 || '0.00';
  } catch (e) {
    return '0.00';
  }
},

// 格式化分享评论
formatSharedComment(content) {
  try {
    const data = JSON.parse(content);
    return {
      text: data.text || '',
      source: data.source || ''
    };
  } catch (e) {
    return { text: '', source: '' };
  }
},

// 格式化直播
formatLiveStream(content) {
  try {
    const data = JSON.parse(content);
    return {
      title: data.title || '',
      cover: data.cover || ''
    };
  } catch (e) {
    return { title: '', cover: '' };
  }
},

// 格式化转发视频
formatForwardedVideo(content) {
  try {
    const data = JSON.parse(content);
    return {
      title: data.title || data.desc || '',
      cover: data.cover || data.thumb_url || '',
      location: data.location || ''
    };
  } catch (e) {
    return { title: '', cover: '', location: '' };
  }
},

// 格式化图片
formatImage(content) {
  try {
    const data = JSON.parse(content);
    return data.url || data.image_url || '';
  } catch (e) {
    // 如果不是JSON格式，可能直接是URL
    return content;
  }
},

// 预览图片
previewImage(content) {
  const url = this.formatImage(content);
  if (url) {
    // 这里可以实现图片预览功能，例如使用Element UI的Image组件
    // 或者其他图片预览库
  }
},

// 格式化位置信息
formatLocation(content) {
  try {
    const data = JSON.parse(content);
    return {
      name: data.name || '',
      address: data.address || '',
      map_url: data.map_url || ''
    };
  } catch (e) {
    return { name: '', address: '', map_url: '' };
  }
},

// 格式化视频
formatVideo(content) {
  try {
    const data = JSON.parse(content);
    return {
      cover: data.cover || data.thumb_url || '',
      url: data.url || data.video_url || '',
      duration: data.duration || 0
    };
  } catch (e) {
    return { cover: '', url: '', duration: 0 };
  }
},

// 格式化视频时长
formatVideoDuration(content) {
  try {
    const data = JSON.parse(content);
    const duration = data.duration || 0;
    const minutes = Math.floor(duration / 60);
    const seconds = duration % 60;
    return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
  } catch (e) {
    return '0:00';
  }
},

// 播放视频
playVideo(content) {
  const videoData = this.formatVideo(content);
  if (videoData.url) {
    // 这里可以实现视频播放功能，例如使用video.js或其他视频播放库
  }
},

// 格式化一起看视频
formatWatchTogether(content) {
  try {
    const data = JSON.parse(content);
    return {
      title: data.title || '',
      cover: data.cover || '',
      url: data.url || ''
    };
  } catch (e) {
    return { title: '', cover: '', url: '' };
  }
},

// 格式化问答
formatQA(content) {
  try {
    const data = JSON.parse(content);
    return {
      question: data.question || '',
      text: data.text || ''
    };
  } catch (e) {
    return { question: '', text: '' };
  }
},

// 格式化时长
formatDuration(duration) {
  if (!duration) return '0:00';
  const minutes = Math.floor(duration / 60);
  const seconds = Math.floor(duration % 60);
  return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
},

// 播放语音消息
playVoiceMessage(item) {
  const audioId = item.id;
  const audioEl = this.$refs[`audio-${audioId}`][0];
  
  if (this.currentPlayingAudio && this.currentPlayingAudio !== audioId) {
    // 停止当前正在播放的音频
    const prevAudioEl = this.$refs[`audio-${this.currentPlayingAudio}`][0];
    prevAudioEl.pause();
    prevAudioEl.currentTime = 0;
  }
  
  if (this.isPlaying(audioId)) {
    // 如果当前音频正在播放，则暂停
    audioEl.pause();
    this.currentPlayingAudio = null;
  } else {
    // 否则播放
    audioEl.play();
    this.currentPlayingAudio = audioId;
  }
},

// 检查是否正在播放
isPlaying(audioId) {
  return this.currentPlayingAudio === audioId;
},

// 音频播放结束
audioEnded(audioId) {
  if (this.currentPlayingAudio === audioId) {
    this.currentPlayingAudio = null;
  }
},

  // 显示消息详情
  showInfo(content) {
    this.$alert(content, '消息详情', {
      confirmButtonText: '确定'
    });
  },
  // 格式化语音时长
  formatDuration(duration) {
    const seconds = Math.floor(duration / 1000);
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
  },

  // 播放语音的方法
  playVoiceMessage(item) {
    const audioRef = this.$refs['audio-' + item.id];
    if (!audioRef || !audioRef[0]) {
      console.warn('Audio element not found');
      return;
    }
    
    const audioElement = audioRef[0];
    
    // 如果有其他正在播放的音频，先停止它
    if (this.playingAudioId && this.playingAudioId !== item.id) {
      const currentPlayingRef = this.$refs['audio-' + this.playingAudioId];
      if (currentPlayingRef && currentPlayingRef[0]) {
        currentPlayingRef[0].pause();
        currentPlayingRef[0].currentTime = 0;
      }
    }
    
    // 如果点击的是当前正在播放的音频，则暂停
    if (this.playingAudioId === item.id) {
      audioElement.pause();
      audioElement.currentTime = 0;
      this.playingAudioId = null;
    } else {
      // 否则播放新的音频
      audioElement.play().catch(err => {
        console.warn('Failed to play audio:', err);
      });
      this.playingAudioId = item.id;
    }
  },

  // 格式化时长显示
  formatDuration(duration) {
    if (!duration) return '0:00';
    const seconds = Math.floor(duration / 1000);
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
  },

  // 检查是否正在播放
  isPlaying(id) {
    return this.playingAudioId === id;
  },

  // 音频播放结束
  audioEnded(id) {
    if (this.playingAudioId === id) {
      this.playingAudioId = null;
    }
  },
    closePrintFunction() {
      this.stopAppendMessageData = true;
      this.storeArray = [];
      this.showBiaoJi = false;
      this.stopAppendMessageData = false;
      this.startPrint = false;
    },
    loadMoreData() {
      const list = this.$refs.messageRef;

      this.loadClass2 = 'el-icon-loading';
      this.loadingText2 = '正在加载. . .';
      let len = this.messageData.length;
      this.selectld = this.messageData.length ? this.messageData[0].id : '';
      this.selectTime = this.messageData.length ? this.messageData[0].msgtime : "";
      this.selectType = 1;
      this.isExistsSelectID = 1;
      // if(this.messageData.length>=100){
      //   this.messageData.splice(100,this.messageData.length-1)
      // }
      this.scrollTop = list.scrollTop;
      this.onSearchShift();
    },
    throttleFn: throttle(function () {
      // 获取列表元素
      const list = this.$refs.messageRef;
      if (list.scrollTop == 0 && list.scrollHeight == 0) return;

      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight + 10 + 10 >= list.scrollHeight) {

        // if(this.messageData.length>200){
        //   this.messageData.splice(0, 100);
        // }

        this.showLoading = true;
        if (this.messageData.length < this.total) {
          this.scrollTop = list.scrollTop;
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          let len = this.messageData.length;
          this.selectld = this.messageData[len - 1].id;
          this.selectTime = this.messageData[len - 1].msgtime;
          this.selectType = 0;
          // if(this.messageData.length>=100){
          //   this.messageData.splice(0,(this.messageData.length-1)-100)
          // }
          // this.$refs.messageRef.scrollTop = 10;
          this.offset++;
          this.onSearch();
        }
        else {
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }

    }, 1000),
     handleOk11() {
      // return
      let data = {
        navigation_list: sessionStorage.getItem('arr').split(','),
        model: 'other_app',
        isChat: 1,
        username: this.chatWithObj.username,
        app_name: this.usernameMM,
        account_id: this.chatWithObj.account_id,
        proof_num: this.chatWithObj.proof_num,
        list_offset: this.offsetLimit.offset,
        list_limit: this.offsetLimit.limit,
        remark: this.remark,
        class: '陌陌',
        label: this.offsetLimit.label,
        msg_offset: this.offset,
        id: Number(this.id)
      }
      sendMarkOrderApi(data).then(res => {
        this.showRemark = false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.messageData = []
        this.onSearch()
      })
    },
    // 添加标记点
    markOrder(item) {
      this.id = item.id;
      this.msgtime = item.msgtime;
      this.usernameMark = item.contactname;
      this.showRemark = true;
    },
    getRefsAff() {
      return this.$refs.messageRef
    },
    showInfo(item) {
      this.erroMessageModel = true
      this.unKnowData = item
    },
    formateTikTokMessage(content) {
      if (content === '') {
        let data = {
          type: 77777777
        }
        return data
      } else {
        try {
          // console.log("999999999999999",JSON.parse(content));
          return JSON.parse(content)

        } catch (error) {
          let data = {
            type: 77777777
          }
          return data
        }
      }
    },
    onSearchStart() {
      this.messageData = []
      this.offset = 1
      this.onSearch()
    },
    // 打开文件
    downLoadFile(path) {
      let data = {
        filePath: path
      }
      openFilePosition(data).then(res => {

      })
    },
    // 格式化红包
    formateHongBao(item) {
      let xml = item.contant,
        xmlDo = x2jsone.xml2js(xml);
      return xmlDo
    },
    // 收红包
    formateHongBaoSystem(item) {
      if (item.contant.indexOf('img') == -1) {
        return item.contant
      } else {
        return item.contant.replace(/[^\u4e00-\u9fa5]/gi, "")
      }
    },
    formDate(date) {
      return parseTime(date)
    },
    handleClickPrint(item, event) {
      if (event.srcElement.innerHTML == '添加') {
        event.srcElement.innerHTML = '√已添加';
        event.srcElement.style.color = 'red';
        event.srcElement.style.fontWeight = '1000';
        this.printArray.push(item);
      } else {
        event.srcElement.innerHTML = '添加';
        event.srcElement.style.color = '#409EFF';
        event.srcElement.style.fontWeight = '500';
        const index = this.printArray.indexOf(item);
        if (index !== -1) {
          this.printArray.splice(index, 1);
        }
      }
    },
    //打印
    printPdf(index, row) {
      this.startPrint = false;
      let storeArray = this.messageData;
      if (this.formResource == '手动添加已读打印') {
        this.messageData = this.printArray;
        this.messageData = this.messageData.sort((a, b) => parseInt(b.msgtime) - parseInt(a.msgtime));
      }
      // this.$print(this.$refs.print) // 使用
      let dom = this.$refs.messageRef
      dom.style['box-shadow'] = "none"
      dom.style['overflow-y'] = "visible"
      let focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);

      let that = this;
      setTimeout(() => {
        printJS({
          printable: 'ddddqq',
          type: 'html',
          documentTitle: '',
          // css:'../../../styles/weChat.css',
          //properties: [
          //    { field: 'name', displayName: '姓名', columnSize:`50%`},
          //    { field: 'sex', displayName: '性别',columnSize:`50%`},
          //],
          // header: ``,
          // style:'',
          // gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
          // gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
          // repeatTableHeader: true,
          // scanStyles:false,
          targetStyles: ['*'],
          ignoreElements: ['no-print', 'bc', 'gb'],
          onPrintDialogClose: () => {//取消打印回调
            clearInterval(focuser);
            dom.style.height = "98vh"
            dom.style['overflow-y'] = "auto"
            that.messageData = storeArray;
          }
        })
      }, 1000)

    },
    printOk() {
      this.showPrint = false;
      if (this.formResource == '手动添加已读打印') {
        this.stopAppendMessageData = true;
        this.scrollTop = this.$refs.messageRef.scrollTop;
        this.startPrint = true;
        this.printArray = [];
        return
      } else if (this.formResource == '截图当前可视区域') {
        this.startPrint = false;
        new ScreenShort({
          enableWebRtc: true, // 是否启用webrtc，值为false则使用html2canvas来截图
          loadCrossImg: true, // 跨域
          level: 999999999999999, // 层级
          // dpi: currentScale, // 设置 DPI
          // clickCutFullScreen:false,
          // wrcWindowMode:true

        });
      } else {
        this.startPrint = false;
        setTimeout(() => {
          this.printPdf();
        }, 2000)
      }
    },
    onSearchShift() {
      let data = {
        recovery: this.recover,
        proof_num: this.chatWithObj.proof_num,
        account_id: Number(this.accountData.account_id),
        model: 'other_app',
        username: this.chatWithObj.username,
        searchkey: this.searchWord,
        offset: this.offset,
        limit: this.limit,
        selectType: this.selectType, //0下1上
        selectTime: this.selectTime,
        isExistsSelectID: 1,
        chatContentID: Number(this.selectld)
      }
      const scrollTop = this.$refs.messageRef.scrollHeight;
      searchFunction(data, '/search/chat/content_new').then(res => {
        if (res.data.length == 0) {
          this.loadClass2 = 'el-icon-success';
          this.loadingText2 = '没有更多了！';
          return
        }
        try {
          // this.$refs.messageRef.scrollTop=0
          let aff = res.data.reverse()
          for (let index = 0; index < aff.length; index++) {
            const element = aff[index];
            this.messageData.unshift(element);
          }


          this.total = res.data[0].cnt

          this.$nextTick(() => {
            // 获取添加元素的高度
            // const newHeight = this.$refs.messageRef.firstElementChild.offsetHeight;
            const newHeight = this.$refs.messageRef.scrollHeight;

            // // 计算需要滚动的距离
            // const scrollDistance = newHeight;

            // 设置列表的滚动高度
            this.$refs.messageRef.scrollTop = newHeight - scrollTop;
          });
          this.showLoading2 = false;
          this.loadClass2 = 'el-icon-refresh-left';
          this.loadingText2 = '点击加载更多';
        } catch (error) {

        }

      })
    },
    methods: {
  parseCardContent(content) {
    try {
      const contentObj = JSON.parse(content);
      // 解析 t28.extends 中的数据
      if (contentObj.t28?.extends) {
        this.cardInfo = JSON.parse(contentObj.t28.extends);
        return true;
      }
      return false;
    } catch (e) {
      console.error('解析名片数据失败:', e);
      return false;
    }
  },
  handleImageError(e) {
    console.error('头像加载失败:', e);
    // 可以设置默认头像
    e.target.src = '默认头像路径';
  }
},
data() {
  return {
    cardInfo: null
  }
},
    onSearch(vlaue) {
      if (sessionStorage.getItem('searchAll') !== null) {
        this.searchWord = sessionStorage.getItem('searchAll');
      }
      // this.messageData = []
      this.self = this.accountData.avatar
      let data = {
        recovery: this.recover,
        proof_num: this.chatWithObj.proof_num,
        account_id: Number(this.chatWithObj.account_id),
        model: 'other_app',
        username: this.chatWithObj.username,
        searchkey: this.searchWord,
        offset: this.offset,
        limit: this.limit
      }
      searchFunction(data, '/search/chat/content').then(res => {
        try {
          if (res.data.length == 0) {
            console.log('当前加载数据条数:', this.messageData.length);
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
            return
          }
          this.$refs.messageRef.scrollTop = this.scrollTop;
          this.total = res.data[0].cnt;
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            this.messageData.push(element)
          }
        } catch (error) {

        }

      })
    },
    // 播放语音
    playAudioFile() {
      this.icon = 'el-icon-video-pause'
      let that = this
      setTimeout(function () {
        that.icon = 'el-icon-video-play'
      }, 2000)
    },

    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visibleAudio = false;
        this.confirmLoading = false;
      }, 500);
    },
    handleCancel(e) {
      this.visibleAudio = false;
    },
    handleOkMessageFriend() {
      this.MessageFriendContentVisible = false;
    },
    handleCancelMessageFriend() {
      this.MessageFriendContentVisible = false;
    },
  }
};
</script>
<style scoped>
.card-message {
  padding: 10px;
}

.card-container {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  max-width: 300px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.card-info {
  flex: 1;
}

.card-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.card-detail {
  font-size: 14px;
  color: #666;
}
#userzb{
  height: 100px;
  width: 100px;
}
/* 基础布局样式 */
.messageBoxFather {
  width: 100%;
  min-height: 785px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.screenBox {
  height: 100%;
  width: 100%;
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.messageBox {
  margin: 0 auto;
  padding: 10px 20px;
  background: rgb(253, 253, 253);
  height: 100%;
  /* max-height: calc(100vh - 150px); */
  overflow-y: auto;
  border-radius: 5px;
  width: 100%;
  flex: 1;
}

/* 滚动条样式 */
.messageBox::-webkit-scrollbar {
  width: 8px;
}

.messageBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  border-radius: 2em;
}

.messageBox::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  border-radius: 2em;
}

/* 聊天气泡基础样式 */
.chat-sender, .chat-receiver {
  clear: both;
  font-weight: bold;
  margin-bottom: .2rem;
  margin-top: 10px;
}

.chat-sender div:nth-of-type(1),
.chat-receiver div:nth-of-type(1) {
  position: relative;
}

.chat-sender div:nth-of-type(1) {
  float: left;
}

.chat-receiver div:nth-of-type(1) {
  float: right;
}

.chat-sender div:nth-of-type(1) img,
.chat-receiver div:nth-of-type(1) img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-sender div:nth-of-type(2) {
  padding: 0;
  color: #848484;
  font-size: 60%;
  text-align: left;
}

.chat-receiver div:nth-of-type(2) {
  padding: 0;
  color: #848484;
  font-size: 60%;
  text-align: right;
}

.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 250px;
  margin: 0 20px 10px 10px;
  padding: 10px;
  border-radius: 7px;
  position: relative;
}

.chat-receiver div:nth-of-type(3) {
  background-color: #b2e281;
  float: right;
  max-width: 300px;
  margin: 0 10px 10px 20px;
  padding: 10px;
  border-radius: 7px;
  position: relative;
}

.chat-left_triangle {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 12px solid rgb(233, 233, 233);
  border-bottom: 6px solid transparent;
  position: absolute;
  left: -12px;
  top: 10px;
}

.chat-right_triangle {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-left: 12px solid #b2e281;
  border-bottom: 6px solid transparent;
  position: absolute;
  right: -12px;
  top: 10px;
}

/* 系统消息样式 */
#systemTips {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  border-radius: 5px;
  margin: 10px auto;
  max-width: 70%;
  color: #666;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 表情消息样式 */
.emoji-message {
  display: flex;
  justify-content: center;
  align-items: center;
}

.emoji-img {
  width: 24px;
  height: 24px;
}

/* 表情包样式 */
.sticker-message {
  display: flex;
  justify-content: center;
}

.sticker-img {
  max-width: 120px;
  max-height: 120px;
}

/* 通话消息样式 */
.call-message {
  display: flex;
  align-items: center;
  gap: 5px;
}

.call-duration {
  color: #999;
  font-size: 14px;
  margin-left: 5px;
}

/* 请收款样式 */
.payment-request {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ff9800;
}

/* 分享评论样式 */
.shared-comment {
  border-left: 3px solid #ddd;
  padding-left: 10px;
}

.comment-source {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

/* 直播样式 */
.live-stream {
  width: 200px;
}

.live-preview {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
}

.live-preview img {
  /* width: 100%;
  height: 100%;
  object-fit: cover; */
}

.live-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #ff5722;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
}

.live-info {
  margin-top: 5px;
  font-size: 14px;
}

/* 转发视频样式 */
.forwarded-video {
  width: 200px;
}

.video-preview {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
}

.video-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 10px;
}

.video-info {
  margin-top: 5px;
  font-size: 14px;
}

.location-tag {
  display: block;
  font-size: 14px;
  color: #2196f3;
  margin-top: 3px;
}

/* 图片消息样式 */
.image-message {
  cursor: pointer;
}

.chat-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
}

/* 位置消息样式 */
.location-message {
  width: 200px;
}

.location-preview {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
}

.location-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #ff5722;
  background-color: white;
  border-radius: 50%;
  padding: 5px;
}

.location-info {
  margin-top: 5px;
  font-size: 14px;
}

.location-address {
  display: block;
  font-size: 14px;
  color: #999;
  margin-top: 3px;
}

/* 视频消息样式 */
.video-message {
  width: 200px;
  cursor: pointer;
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 10px;
}

.video-duration {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 14px;
}

/* 邀你一起看视频样式 */
.watch-together {
  width: 200px;
}

.watch-preview {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
}

.watch-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.watch-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 10px;
}

.watch-info {
  margin-top: 5px;
  font-size: 14px;
  color: #2196f3;
  text-align: center !important;
}

/* 问答样式 */
.qa-message {
  width: 100%;
}

.question, .answer {
  margin: 5px 0;
}

.question-label, .answer-label {
  font-weight: bold;
  color: #2196f3;
}

.answer-label {
  color: #4caf50;
}

/* 语音消息样式 */
.voice-message {
  cursor: pointer;
  min-width: 120px;
  display: flex;
  align-items: center;
  padding: 8px 15px;
}

.voice-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: #f0f0f0;
  border-radius: 18px;
  min-width: 140px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.voice-text {
  font-size: 14px;
}

.voice-duration {
  font-size: 14px;
  color: #999;
  margin-left: auto;
}

.voice-message i {
  font-size: 20px;
  margin-right: 10px;
  padding: 10px;
}

/* 抖音视频分享样式 */
.itemTikTok {
  width: 240px;
  min-height: 440px;
  position: relative;
  left: 0;
  margin: 0;
}

.videoContent {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  font-size: 14px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 未知消息类型样式 */
.unKonw {
  color: #ff5722;
  text-decoration: underline;
  cursor: pointer;
}

/* 标记按钮样式 */
.orderBtn {
  opacity: 0;
  transition: opacity 0.3s;
  margin-right: 20px;
  float: right;
  color: #000;
}

.chat-sender > div:last-child:hover .orderBtn,
.chat-receiver > div:last-child:hover .orderBtn {
  opacity: 1;
}

.badgeBox {
  background-color: #f56c6c;
  padding: 2px 5px;
  border-radius: 10px;
  font-size: 14px;
  margin-top: 5px;
  display: inline-block;
  float: right;
  width: 100px;
  height: 33px;
  text-align: center;
  line-height: 33px;
  color: red;
}

/* 加载更多样式 */
.loadingBoxbottom {
  text-align: center;
  padding: 10px;
  font-size: 14px;
  color: #2196f3;
  width: 100%;
  cursor: pointer;
}

/* 其他组件样式 */
.audioBox {
  width: 100%;
  height: 100px;
  display: flex;
  padding: 0 15px;
}

.AudioLogo {
  position: relative;
  width: 78.14px;
  height: 78.14px;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.itemAudio {
  height: 39px;
  background: #f3f3f3;
  width: 625.18px;
  padding: 9.3px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pathBox {
  height: 100px;
}

#playAudio {
  position: absolute;
  font-size: 23px;
  color: #dfdfdf;
  top: 34.5%;
  left: 34.5%;
  cursor: pointer;
  margin: auto;
}

.bottomBorder {
  border-bottom: 1px solid rgb(224, 224, 224);
}

.messageContentTitle {
  height: 56.26px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.friendName {
  line-height: 22.39px;
  font-size: 13px;
}

/* 响应式设计 - 大屏幕 */
@media screen and (min-width: 2360px) {
  .messageBox {
    max-height: 81vh;
    padding-bottom: 200px;
  }
  
  .chat-receiver div:nth-of-type(3) {
    max-width: 1.1rem;
  }
  
  .chat-sender div:nth-of-type(3) {
    max-width: 1.1rem;
  }
  
  .map {
    width: 1rem;
    height: 1rem;
  }
  
  .mapTitle {
    height: .2rem;
  }
  
  .friendName {
    line-height: 0.1rem;
    font-size: 0.07rem;
  }
  
  .messageContentTitle {
    height: 0.3rem;
    width: 1.7rem;
  }
  
  .AudioLogo {
    width: .5rem;
    height: .5rem;
  }
  
  .itemAudio {
    height: .25rem;
    width: 2.1rem;
    padding: .06rem;
  }
  
  .pathBox {
    height: .5rem;
  }
  
  .audioBox {
    height: .5rem;
    padding: 0 .1rem;
  }
  
  #playAudio {
    font-size: .16rem;
  }
  
  .screenBox {
    height: 85vh;
  }
}

/* 响应式设计 - 中等屏幕 */
@media screen and (max-width: 1440px) {
  .chat-sender div:nth-of-type(3),
  .chat-receiver div:nth-of-type(3) {
    max-width: 300px;
  }
  
  .image-message img,
  .video-preview,
  .location-preview,
  .live-preview,
  .watch-preview {
    max-width: 180px;
    max-height: 180px;
  }
  
  .forwarded-video,
  .live-stream,
  .watch-together,
  .location-message {
    width: 180px;
  }
}

/* 响应式设计 - 小屏幕 */
@media screen and (max-width: 768px) {
  .messageBox {
    padding: 10px;
  }
  
  .chat-sender div:nth-of-type(3),
  .chat-receiver div:nth-of-type(3) {
    max-width: 300px;
  }
  
  .chat-sender div:nth-of-type(1) img,
  .chat-receiver div:nth-of-type(1) img {
    width: 30px;
    height: 30px;
  }
  
  .chat-sender div:nth-of-type(2) {
    margin: 0 20px 2px 40px;
  }
  
  .chat-receiver div:nth-of-type(2) {
    margin: 0 40px 2px 20px;
  }
  
  .image-message img,
  .video-preview,
  .location-preview,
  .live-preview,
  .watch-preview {
    max-width: 140px;
    max-height: 140px;
  }
  
  .forwarded-video,
  .live-stream,
  .watch-together,
  .location-message {
    width: 140px;
  }
  
  .itemTikTok {
    width: 160px;
    min-height: 300px;
  }
}
/* 字体大小优化 */
.chat-sender div:nth-of-type(2),
.chat-receiver div:nth-of-type(2) {
  padding: 0;
  color: #848484;
  font-size: 12px; /* 增大时间和名称字体 */
  text-align: left;
}

.chat-receiver div:nth-of-type(2) {
  text-align: right;
}

.chat-sender div:nth-of-type(3),
.chat-receiver div:nth-of-type(3) {
  font-size: 15px; /* 增大聊天内容字体 */
  line-height: 1.5; /* 增加行高，提高可读性 */
}

/* 系统消息字体 */
#systemTips {
  font-size: 12px; /* 增大系统消息字体 */
  color: #666;
}

/* 通话消息字体 */
.call-message {
  font-size: 15px;
}

.call-message i {
  font-size: 18px;
}

.call-duration {
  font-size: 14px;
  color: #666;
}

/* 请收款消息字体 */
.payment-request {
  font-size: 15px;
}

.payment-request i {
  font-size: 18px;
}

/* 语音通话样式 */
.voice-message .voice-text {
  font-size: 15px;
}

.voice-message .voice-duration {
  font-size: 14px;
}

/* 视频时长字体 */
.video-duration {
  font-size: 13px;
  padding: 3px 6px;
}

/* 位置信息字体 */
.location-info {
  font-size: 15px;
}

.location-address {
  font-size: 13px;
}

/* 问答样式字体 */
.qa-message {
  font-size: 15px;
  text-align: left;
}

.question-label, .answer-label {
  font-size: 16px;
}

/* 抖音视频分享字体 */
.videoContent {
  font-size: 15px;
}

/* 加载更多按钮字体 */
.loadingBoxbottom {
  font-size: 15px;
}

/* 标记按钮字体 */
.orderBtn {
  font-size: 14px !important;
}

.badgeBox {
  font-size: 13px;
}

/* 响应式字体大小 */
@media screen and (max-width: 768px) {
  .chat-sender div:nth-of-type(3),
  .chat-receiver div:nth-of-type(3) {
    font-size: 14px;
  }
}

@media screen and (min-width: 1920px) {
  .chat-sender div:nth-of-type(3),
  .chat-receiver div:nth-of-type(3) {
    font-size: 16px;
  }
  
  .chat-sender div:nth-of-type(2),
  .chat-receiver div:nth-of-type(2) {
    font-size: 13px;
  }
}
</style>